<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="UTF-8">
        <title>修改用户信息</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" th:href="${urls.getForLookupPath('/css/font.css')}">
        <link rel="stylesheet" th:href="${urls.getForLookupPath('/css/xadmin.css')}">
        <script th:src="${urls.getForLookupPath('/lib/layui/layui.js')}" charset="utf-8"></script>
        <script type="text/javascript" th:src="${urls.getForLookupPath('/js/xadmin.js')}"></script>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                    <div>
                        <input type="text" hidden th:value="${edituser.id}" th:name="id">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>昵称</label>
                        <div class="layui-input-inline">
                            <input th:value="${edituser.nickname}" type="text" id="nickname" name="nickname" lay-verify="nickname" autocomplete="off" placeholder="请输入昵称"
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>用户名</label>
                        <div class="layui-input-inline">
                            <input th:value="${edituser.username}" type="text" id="username" name="username" lay-verify="username" autocomplete="off" placeholder="请输入用户名"
                                   class="layui-input" onchange="checkExist()">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>密码</label>
                        <div class="layui-input-inline">
                            <input th:value="${edituser.password}" type="password" id="password" name="password" lay-verify="password" autocomplete="off" placeholder="请输入密码"
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>确认密码</label>
                        <div class="layui-input-inline">
                            <input th:value="${edituser.password}" type="password" id="repasswd" name="repasswd" lay-verify="repasswd" autocomplete="off"
                                   placeholder="请再次输入密码" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="username" class="layui-form-label">
                            <span class="x-red">*</span>角色选择</label>
                        <div class="layui-input-inline">
                            <select name="role">
                                <option th:field="${edituser.role}" value="user">普通用户</option>
                                <option th:field="${edituser.role}" value="admin">管理员</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text" lay-filter="test">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>拥有权限
                        </label>
                        <table class="layui-table layui-input-block">
                            <tbody>
                            <div class="layui-input-block">
                                <input name="permission" lay-skin="primary" type="checkbox" value="A" title="添加权限">
                                <input name="permission" lay-skin="primary" type="checkbox" value="C" title="修改权限">
                                <input name="permission" lay-skin="primary" type="checkbox" value="S" title="查询权限">
                                <input name="permission" lay-skin="primary" type="checkbox" value="D" title="删除权限">
                            </div>
                            </tbody>
                        </table>
                        <input th:value="${edituser.permission}" id="permissionHidden" lay-skin="primary" type="hidden">
                    </div>

                    <div class="layui-form-item">
                        <button lay-filter="edit" id="addButton" lay-submit="" class="layui-btn layui-btn-fluid">确认修改</button>
                    </div>
                </form>
            </div>
        </div>
        <script>layui.use(['form', 'layer'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;

                // 权限回显
                window.onload = function(){
                    var checkeds = $("#permissionHidden").val();        // 获取数据库传过来的值
                    var checkedsArray = checkeds.split(",");            // 分隔
                    var checkedBoxAll = $("input[name='permission']");  // 获取每个checkbox
                    for (var i = 0; i < checkedsArray.length; i++){     // 遍历每个数据和每个checkbox
                        $.each(checkedBoxAll, function (j, checkbox) {
                            var checkedValue = $(checkbox).val();       // 获取checkbox的值
                            if (checkedsArray[i] === checkedValue){     // 如果和数据库传来的值相等
                                //console.log($(checkbox).prop("checked"));
                                $(checkbox).prop("checked", true);
                                //console.log($(checkbox).prop("checked"));
                            }
                        })
                    }
                    form.render('checkbox');
                }

                //自定义验证规则
                form.verify({
                    nikename: function (value) {
                        if (value.length === 0) {
                            return '请输入昵称！';
                        }else if(value.length > 10){
                            return '昵称长度不能超过10!';
                        }
                    },
                    username: function (value) {
                        if (value.length === 0) {
                            return '请输入用户名！';
                        }else if(value.length > 10){
                            return '用户名长度不能超过10!';
                        }
                    },
                    password: function (value) {
                        if (value.length === 0) {
                            return '密码不能为空！';
                        }else if(value.length > 15){
                            return '密码长度不能超过15!';
                        }
                        if (value !== $('#repasswd').val()) {
                            return '两次密码不相同！';
                        }
                    }

                });

                //监听提交
                form.on('submit(edit)',
                    function(data) {
                        var userPers = [];
                        $("input:checkbox[name='permission']:checked").each(function(){
                            console.log($(this).val());
                            userPers.push($(this).val());
                        })
                        console.log(data.field);
                        console.log(userPers);
                        // 使用ajax传递数据
                        SendData = $.ajax({
                            type: "POST",
                            url: "/adminmanage/updateUser",
                            data:{
                                id:data.field.id,
                                nickname:data.field.nickname,
                                username:data.field.username,
                                password:data.field.password,
                                role:data.field.role,
                                permission:userPers.toString(),
                            },
                            success:function () {
                                layer.alert('修改成功！', {
                                        icon: 6
                                    },
                                    function () {
                                        xadmin.father_reload();     // 对父窗口进行刷新
                                        xadmin.close();         // 关闭当前 frame
                                    });
                            },
                            error:function () {
                                layer.alert('修改失败！', {icon:5});
                            }
                        });
                        // 等待 ajax 执行完毕
                        $.when(SendData).done(function (value) {

                        });
                        return false;
                    });

            });

        // 监听用户名是否已经存在
        function checkExist(){
            var username =document.getElementById('username').value;
            $.ajax({
                url: "/adminmanage/checkExit/" + username,
                type:"GET",
                success: function (result) {
                    if (result === 'exist'){
                        $('#usernametip').html("此用户名已经存在!");
                        $('#addButton').attr("disabled", "true");
                    }else{
                        $('#usernametip').html("此用户名可用!");
                        $('#addButton').removeAttr("disabled");
                    }
                }
            })
        }
        </script>
    </body>

</html>
